<style lang="sass" scoped>
    .system{
        li{
            display:inline-block; 
        }  
    }
    .system li a:hover{color:#fff!important;}
    .block_alert_cheng .conmain{
        min-width:500px;
    }
    .danger{
        background:#fbd5d5;
    }
    .main{
        padding:20px;
        border:solid 1px #ddd;
        background:#fff;
        border-top:none;
        padding-bottom:30px;
    }
</style>

<template>
<div class="container-fluid">
    <div class="row comm_conent_padding">
        <nav-bar><li slot="nav_two">系统管理</li></nav-bar>

        <!-- 切换nav -->
        <ul class="nav nav-tabs">
            <li role="presentation" 
                :class="{'active':index==0?true:false}" 
                v-for="(item,index) in conpanyLlist"
                @click="selectSystems($event,item)"
                ><a href="javascript:">{{item.companyName}}</a></li>
        </ul>

        <!-- 系统列表 -->
        <div class="main mb20">
            <div class="block">
                <button class="btn btn-primary" v-on:click="addCount('add')" type="button">新增系统</button>

                <div class="table-responsive mt20" v-show="systemList.length">
                    <table class="table table-bordered table_color">
                        <tr class="tr_default">
                            <th>系统名字</th>
                            <th>系统编码</th>
                            <th>服务端目录</th>
                            <th>nginx OR data</th>
                            <th>集成环境权限code</th>
                            <th>正式环境权限code</th>
                            <th>终止发布标识符</th>
                            <th>激活状态</th>
                            <th>操作</th>
                        </tr>
                        <tr :class="{'danger':item.isUse==0?true:false}" v-for="item in systemList">
                            <td class="tc" v-text="item.sysName"></td>
                            <td class="tc" v-text="item.sysCode"></td>
                            <td class="tc" v-text="item.serverDir"></td>
                            <td class="tc" v-text="item.onlineDir"></td>
                            <td class="tc" v-text="item.distCode"></td>
                            <td class="tc" v-text="item.onlneCode"></td>
                            <td class="tc" v-text="item.stopString"></td>
                            <td class="tc" v-text="item.isUse==1?'激活':'禁用'"></td>
                            <td>
                                <button class="btn btn-sm" 
                                    :class="{'btn-info':item.isUse==0?true:false,'btn-danger':item.isUse==1?true:false}" type="button" 
                                    v-on:click="isActiOrDisable(item)" >{{item.isUse==0?'激活':'禁用'}}</button>
                                <button class="btn btn-success btn-sm" v-on:click="addCount('update',item)" type="button">修改</button>

                                <router-link class="btn btn-primary btn-sm"  :to="{name:'distHome',query:{'companyCode': companyCode,'sysCode':item.sysCode}}">集成发布</router-link>
                                <router-link class="btn btn-info btn-sm"  :to="{name:'onlineHome',query:{'companyCode': companyCode,'sysCode':item.sysCode}}">生产发布</router-link>
                            </td>
                        </tr>
                    </table>    
                </div>

                <div class="tc mt30" v-show="!systemList.length">还没有系统额，新增一个吧!</div>
            </div>
        </div>

        <!-- 新增 | 修改 系统 -->
        <modal :backdrop="false" :show="modal.show" :title="modal.title" :callback ="onSubmit" @onPropsChange="change">
            <div slot="modal-body">
                <div class="main pd15">
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">所属公司:</div>
                        <div class="right fl">
                            <select class="form-control w-300" v-model="modal.companyCode">
                                <option value="">请选择所属公司</option>
                                <option v-for="(item,index) in conpanyLlist" :key="index" :value="item.companyCode">{{item.companyName}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">系统名字:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.sysName" ></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">系统编码:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.sysCode"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">正式websocket链接:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.onlineSocketSrc"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">服务端目录:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.serverDir"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">终止发布标识符:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.stopString"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">nginx OR data:</div>
                        <div class="right fl">
                            <select class="form-control w-300" v-model="modal.onlineDir">
                                <option value="">请选择存放类型</option>
                                <option value="nginx">nginx</option>
                                <option value="data">data</option>
                            </select>
                        </div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">集成环境权限code:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.distCode"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">正式环境权限code:</div>
                        <div class="right fl"><input type="text" class="form-control w-300" v-model="modal.onlneCode"></div>
                    </div>
                    <div class="block overflow mb10">
                        <div class="left fl mr20 mt5 w-150 tr">激活状态:</div>
                        <div class="right fl">
                            <select class="form-control w-300" v-model="modal.isUse">
                                <option value="1">激活</option>
                                <option value="0">禁用</option>
                            </select>
                        </div>
                    </div>

                    
                </div>
            </div>
        </modal>

    </div>    
</div>
</template>

<script>
    import navBar from 'components/navBar' 
    import modal from 'components/modal'

    export default {
        components: {
            navBar,
            modal,
        },
        data(){
            return {
                conpanyLlist:[],
                systemList:[],
                companyCode:'',
                modal:{
                    show:false,
                    title:'',
                    api:'',
                    id:'',
                    companyCode:'',
                    sysName:'',
                    sysCode:'',
                    onlineSocketSrc:'',
                    serverDir:'',
                    onlineDir:'',
                    distCode:'',
                    onlneCode:'',
                    isUse:1,
                },
                
            }
        },
        mounted() {
            this.$nextTick(()=>{
                this.getCompanyList();
            })

        },
        methods: {
            change(propName,newVal,oldVal){
                this.modal[propName]=newVal;
            },
            // 获得系统列表
            getCompanyList(){
                util.ajax({
                    url:config.baseApi+'api/getCompanyList',
                    success:data=>{
                        this.conpanyLlist = data.data;
                        if(!this.conpanyLlist.length) return false;
                        this.companyCode = data.data[0].companyCode
                        this.getSystemList()
                    }
                }) 
            },

            selectSystems($event,item){
                let nodeName = $event.target.nodeName
                let ele = null
                if(nodeName == 'A'){
                    ele = $($event.target).parent('li')
                }else if(nodeName == 'LI'){
                    ele = $($event.target)
                }
                ele.addClass('active').siblings('li').removeClass('active');
                this.companyCode = item.companyCode;
                this.getSystemList()
            },

            // 获得系统列表
            getSystemList(){
                util.ajax({
                    url:config.baseApi+'api/getSystemListForCompanyCode',
                    data:{
                        companyCode:this.companyCode
                    },
                    success:data=>{
                        this.systemList = data.data;
                    }
                })
            },

            // 激活 || 禁用
            isActiOrDisable(item){
                popup.confirm({title:`确定${item.isUse==0?'激活':'禁用'}吗？`,yes:()=>{
                    util.ajax({
                        url:config.baseApi+'api/systemActivOrDisable',
                        data:{
                            id:item.id,
                            isUse:item.isUse
                        },
                        success:data=>{
                            this.getSystemList();
                            popup.miss({title:'操作成功!'})
                        }
                    })
                }})
            },

            addCount(type,item){
                this.modal = util.emptyJson(this.modal)
                this.modal.isUse = 1
                this.modal.show = true;

                if(type == 'add'){
                    this.modal.api             =  `api/addSystem`
                    this.modal.title           =  '新增系统'
                }else if(type == 'update'){
                    this.modal.api             =  `api/updateSystem`
                    this.modal.title           =  '修改系统',
                    this.modal.id              =  item.id
                    this.modal.sysName         =  item.sysName 
                    this.modal.sysCode         =  item.sysCode 
                    this.modal.onlineSocketSrc =  item.onlineSocketSrc 
                    this.modal.serverDir       =  item.serverDir 
                    this.modal.onlineDir       =  item.onlineDir 
                    this.modal.distCode        =  item.distCode 
                    this.modal.onlneCode       =  item.onlneCode 
                    this.modal.isUse           =  item.isUse 
                    this.modal.companyCode     =  item.companyCode 
                    this.modal.stopString      =  item.stopString 
                } 
            },

            // 新增 | 修改 系统
            onSubmit(){
                if(!util.regCombination('*').test(this.modal.sysName)){
                    popup.alert({title:'请填写系统名称!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.sysCode)){
                    popup.alert({title:'请填写系统编码!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.onlineSocketSrc)){
                    popup.alert({title:'请填写 websocket 链接地址!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.serverDir)){
                    popup.alert({title:'请填写服务端目录!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.distCode)){
                    popup.alert({title:'请填写集成环境权限code!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.onlineDir)){
                    popup.alert({title:'请选择nginx OR data!'}); return false;
                }
                if(!util.regCombination('*').test(this.modal.onlneCode)){
                    popup.alert({title:'请填写正式环境权限code!'}); return false;
                }
                util.ajax({
                    url:config.baseApi+this.modal.api,
                    data:this.modal,
                    success:data=>{
                        this.getSystemList();
                        this.modal.show = false;
                        popup.miss({title:'操作成功!'})
                    }
                })


            },
           
        },
    }
</script>


